<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<title>Pagina sencilla para el ejercicio del bloque T2.5</title>
</head>

<body>
<h1> Ejercicio del bloque T2.5 </h1>
<h2> Crear un formulario para la creación e incrementación de un contador </h2>

<!--Formulario para la creación de un contador-->
<form action="javascript:crear()">
Ponle nombre al contador:<input type ="text" id="contador" />
<p></p>
Ponle valor al contador: <input type ="text" id="valor" />
<input type="submit" value="Crear contador" />
</form>

<p></p>
<div id='Resultado'></div>
<p></p>

<!--Formulario para incrementar un contador-->
<form action="javascript:incrementar()">
¿Qué contador vas a incrementar?<input type ="text" id="contador2" />
<input type="submit" value="Incrementale!!" />
</form>

<p></p>
<div id='Incrementado'></div>
<p></p>

<script type='application/javascript'>

var request = new XMLHttpRequest();

function crear() {
  var nombre=document.getElementById('contador').value;
  var valor=document.getElementById('valor').value;
  var peticion_str = '/contador/'+nombre+"/"+valor;
  request.open('POST',peticion_str,true);
  request.onreadystatechange= escribe_resultado1 ;
  request.send(null);
}

function escribe_resultado1(){

  if ( request.readyState == 4 ) {
    if ( request.status == 200 ) {
	var json;
	eval ( 'json = '+ request.responseText );
	document.getElementById('Resultado').innerHTML= 'Contador '+ json.id + ', con valor: '+ json.valor + ' creado con éxito!!';
    }
  }
}

function incrementar() {
  var nombre=document.getElementById('contador2').value;
  var peticion_str = '/incrementa/'+nombre;
  request.open('GET',peticion_str,true);
  request.onreadystatechange= escribe_resultado2 ;
  request.send(null);
}

function escribe_resultado2(){

  if ( request.readyState == 4 ) {
    if ( request.status == 200 ) {
	var json;
	eval ( 'json = '+ request.responseText );
	document.getElementById('Incrementado').innerHTML= 'Contador '+ json.id + ', se ha incrementado en 1, y ahora vale: '+ json.valor;
    }
  }
}

</script>


</form>
</body>

</html>
